<template>
  <div class="page">
    <v-pageTitle title="个人月度总结"></v-pageTitle>
    <v-pageSearch>
      <el-form :inline="true">
        <el-row>
          <el-col :span="8">
            <el-form-item label="考核对象：">
              <h4>超级管理员</h4>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考核月度：">
              <h4>2017-11</h4>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="级别：">
              <h4>良</h4>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </v-pageSearch>

    <v-pageToolbar align='left'>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="">
          <h4>自荐内容</h4>
        </el-form-item>
      </el-form>
    </v-pageToolbar>
    <el-form ref="form" label-width="0px" style="margin-top:22px;">
      <el-form-item label="">
        <div>
          <tinymce :height='150' v-model="content"></tinymce>
        </div>
      </el-form-item>
      <el-form-item label="">
        <el-button  size="small" type="success" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
    
    <!--工具条-->
    <v-pageToolbar align="left">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-row>
          <el-col :span="3">
            <el-form-item label="">
              <h4>考核详情</h4>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="历史查询">
              <el-date-picker
                size="small"
                v-model="formSearch.valueMonth"
                type="month"
                placeholder="选择月">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button size="small" type="primary" @click="onSearch">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </v-pageToolbar>
    <v-pageTable>
        <el-table v-loading="tableData.loading" :data="tableData.body" border style="width: 100%" class="headerNone">
            <el-table-column prop="name" label="" min-width="150">
            </el-table-column>
            <el-table-column prop="score" label="" min-width="150">
            </el-table-column>
            <el-table-column prop="type1" label="" min-width="150">
            </el-table-column>
            <el-table-column prop="time1" label="" min-width="150">
            </el-table-column>
            <el-table-column prop="type2" label="" min-width="150">
            </el-table-column>
            <el-table-column prop="time2" label="" min-width="150">
            </el-table-column>
            <el-table-column fixed="right" label="" min-width="80">
                <template slot-scope="scope">
                  <el-button  @click="handleClick(scope.row)" type="danger" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </v-pageTable>
    <!-- 图表 -->
    <v-pageToolbar align='left'>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="">
          <h4>月度分数变化图</h4>
        </el-form-item>
      </el-form>
    </v-pageToolbar>
    <div id="myChart" style="margin-top:20px;"></div>
  </div>
</template>
<script>
  import Tinymce from '@/components/common/Tinymce'
  export default {
    components: { Tinymce },
    data() {
      return {
        content:'',
        formSearch:{
          valueMonth: new Date()
        },
        tableData: {
            loading: true,
            head: [],
            body: []
        },
        paginationTotal: 100,
        sels:[]
      }
    },
    methods: {
      onSubmit(){
        console.log(this.cover)
      },
      onSearch(){
        console.log(this.formSearchformSearch)
      },
      getTableData() {
          // ajax 查询表格数据
          this.tableData.body = [
            {
              name: '工作量分(40%)',
              score: 75,
              type1: '请假',
              time1: '2小时',
              type2: '加班',
              time2: '20小时'
            },
            {
              name: '工作品质分(30%)',
              score: 75,
              type1: '请假',
              time1: '2小时',
              type2: '加班',
              time2: '20小时'
            },
            {
              name: '学习创新分(10%)',
              score: 75,
              type1: '请假',
              time1: '2小时',
              type2: '加班',
              time2: '20小时'
            },
            {
              name: '团队协作分(18%)',
              score: 75,
              type1: '请假',
              time1: '2小时',
              type2: '加班',
              time2: '20小时'
            },
            {
              name: '平时分(20%)',
              score: 75,
              type1: '请假',
              time1: '2小时',
              type2: '加班',
              time2: '20小时'
            },
            {
              name: '经理评分(80%)',
              score: 75,
              type1: '请假',
              time1: '2小时',
              type2: '加班',
              time2: '20小时'
            },
            {
              name: '全 勤 (2%)',
              score: 75,
              type1: '请假',
              time1: '2小时',
              type2: '加班',
              time2: '20小时'
            },
            {
              name: '总评',
              score: 75,
              type1: '请假',
              time1: '2小时',
              type2: '加班',
              time2: '20小时'
            }
          ]
          // 模拟加载
          setTimeout(() => {
              this.tableData.loading = false
          }, 1000)
      },
      handleClick(row) {
        console.log(row.name);
        this.$router.push({ path: '/assessMonth/detail?' + row.name})
      },
      drawLine(){
        // 基于准备好的dom
        var mainContainer = document.getElementById('myChart');
        //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeMainContainer = function () {
            mainContainer.style.width = window.innerWidth*0.85+'px';
            mainContainer.style.height = window.innerHeight*0.5+'px';
        };
        //设置div容器高宽
        resizeMainContainer();
        // 初始化echarts实例
        var myChart = this.$echarts.init(mainContainer);  
        // 绘制图表
        myChart.setOption({
          title: {
              text: '',
              left: 'center',
              subtext: ''
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              left: '10%',
              data:['月度评分']
          },
          toolbox: {
              right: '10%',
              show: true,
              feature: {
                  dataZoom: {
                      yAxisIndex: 'none'
                  },
                  dataView: {readOnly: false},
                  magicType: {type: ['line', 'bar']},
                  restore: {},
                  saveAsImage: {}
              }
          },
          xAxis:  {
              type: 'category',
              boundaryGap: false,
              data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                  formatter: '{value} '+' 分'
              }
          },
          series: [
              {
                  name:'月度评分',
                  type:'line',
                  data:[75,80,90,75,80,85,90,100,75,60,75,85],
                  markPoint: {
                      data: [
                          {type: 'max', name: '最大值'},
                          {type: 'min', name: '最小值'}
                      ]
                  },
                  markLine: {
                      itemStyle:{
                        normal:{lineStyle:{type:'dashed',color:'#000'},
                        label:{show:true,position:'end'}}
                      },
                      large:true,
                      effect:{
                        show: false,
                        loop: true,
                        period: 0,
                        scaleSize : 2,
                        color : null,
                        shadowColor : null,
                        shadowBlur : null
                      },
                      data:[
                      [
                          {
                            name: '标线1起点', 
                            value: '评分基准线', 
                            xAxis: '1月', 
                            yAxis: 75,
                            label: {
                              normal: {
                                show: true,
                                position: 'end',
                              },
                            }
                          },      // 当xAxis为类目轴时，数值1会被理解为类目轴的index，通过xAxis:-1|MAXNUMBER可以让线到达grid边缘
                          {name: '标线1终点', xAxis: '12月', yAxis: 75},             // 当xAxis为类目轴时，字符串‘周三‘会被理解为与类目轴的文本进行匹配
                      ]
                    ]
                  }
              }
          ]
        });
        // 自适应
        window.onresize = function(){
          mainContainer.style.width = window.innerWidth*0.85+'px';
          mainContainer.style.height = window.innerHeight*0.5+'px';
          myChart.resize();
        }
      }
    },
    mounted() {
        // 获取table数据
        this.getTableData()
        // 绘制图表
        this.drawLine()
    }
  }
</script>
<style scoped>
  
</style>